<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript"
	src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<style type="text/css">
#check {
	margin-left: 50px;
	margin-top: 30px;
}

#checkId {
	float: right;
	width: 70px;
	border: #DCDCDC;
	border-radius: 5px;
}

#ok {
	float: right;
	width: 40px;
	border: #DCDCDC;
	border-radius: 5px;
}
</style>
<script type="text/javascript">
	$(document)
			.ready(
					function() {
						$("#checkId")
								.click(
										function() {
											$
													.ajax({
														url : 'checkId.json',
														data : 'user_id='
																+ checkform.user_id.value,
														success : function(data) {
															if (data === 'yes') {
																var chkmsg = "<font color='red'>중복된 아이디가 있습니다</font>";
																$('#checkIdDiv')
																		.html(
																				chkmsg);
															} else {
																var chkmsg = "<font color='red'>중복된 아이디가 없습니다</font>";
																opener.document.Join.user_id.value = document.checkform.user_id.value;
																$('#checkIdDiv')
																		.html(
																				chkmsg);
															}
														}
													});
										});
					});
</script>
<title>중복 확인</title>
</head>
<body>
	<div id="check">
		<h3>아이디 중복 확인</h3>
		<form action="" id="checkform" name="checkform">
			<table>
				<tr>
					<td><input type="text" value="${param.id}" name="user_id"
						id="user_id" maxlength="12" pattern="^[a-zA-Z0-9_]+$"></td>
					<td><input type="button" id="checkId" name="checkId"
						value="중복확인"></td>
					<td><input type="button" id="ok" name="ok" value="닫기"
						onclick="self.close();"></td>
				</tr>
			</table>
		</form>
	</div>
	<div id="checkIdDiv"></div>


</body>
</html>